<style rel="stylesheet/scss" lang="scss" scoped>
	.f-cation {
		flex: 1.5;
		display: flex;
		height: 70%;
		padding: 0 5px 0;
		margin: 0 5px;
		border: 1px solid #e5e5e5;
		flex-direction: column;
		margin-top: 10px;
		.f-cation_btn {
			width: 100%;
			height: 30px;
			color: #fff;
			display: flex;
			line-height: 30px;
			padding-left: 10px;
			cursor: pointer;
			background: #409EFF;
			span {
				flex: 1;
				text-align: center;
			}
		}
		.ta {
			flex: 1;
			width: 100%;
			height: 500px;
			overflow: auto;
		}
		.text-s {
			color: #409EFF;
			margin: 0 10px;
			cursor: pointer;
		}
		.text-red {
			cursor: pointer;
		}
		.box-flex {
			display: flex;
			align-items: center;
		}
		.sp-w-50 {
			width: 100px;
			line-height: 40px;
		}
		.text-not {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: #666;
		}
	}
</style>
<template>
	<div class="f-cation">
		<!--<el-radio  label="TEXT" v-model="type">纯文本</el-radio>-->
		<p class="f-cation_btn text-14">
			<font @click="addCat">新增+</font>
			<span>二级品类属性</span>
		</p>
		<div class="ta">
			<template v-if="list && list.length>0">
				<el-table :data="list" stripe style="width: 100%">
					<el-table-column prop="propertyName" label="属性" align="center">
					</el-table-column>
					<el-table-column prop="groupName" label="所属组"  align="center">
					</el-table-column>
					<el-table-column prop="propertyType" label="所属类型" align="center">
						<template slot-scope="scope">
							{{scope.row.propertyType == 'TEXT' ? '文本': scope.row.propertyType == 'URL' ? '文本链接':scope.row.propertyType == 'IMAGE' ? '纯图片':
							'图片链接'}}
						</template>
					</el-table-column>
					<el-table-column prop="sort" label="顺序号" align="center" ></el-table-column>
					<el-table-column label="操作" align="center" width="150px">
						<template slot-scope="scope">
							<span class="text-s" @click="editFn(scope.row)">编辑</span>
							<span class="text-red" @click="deleteFn(scope.row)">删除</span>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<div v-else class="text-not">暂无数据</div>
		</div>
		<el-dialog :title="title" :visible.sync="centerDialogVisible" width="45%" center>
			<el-row class="p-all-20 ">
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">属性名称:</span>
					<template>
						<el-select v-model="propertyName" placeholder="请选择">
							<el-option v-for="item in selectList" :key="item.showName" :label="item.showName" :value="item.showName">
							</el-option>
						</el-select>
					</template>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 ">属性类型:</span>
					<el-radio label="TEXT" v-model="type">纯文本</el-radio>
					<el-radio label="URL" v-model="type">文本链接</el-radio>
					<el-radio label="IMAGE" v-model="type">纯图片</el-radio>
					<el-radio label="IMAGE_URL" v-model="type">图片链接</el-radio>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">所属组名:</span>
					<el-input placeholder="所属组名" v-model="groupName" maxLength="20"  readonly="readonly"/>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">顺序号:</span>
					<el-input v-model="num" type="number" placeholder="顺序号" maxLength="5" oninput="if(value.length>5)value=value.slice(0,5)"
					/>
				</el-col>

			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdmin">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>
<script>
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	export default {
		props: {
			leveThirdList: {
				type: Array,
				default: []
			},
			secondId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				propertyName: '',
				type: 'TEXT',
				id: '',
				title: '新增属性',
				groupName: '',
				num: '',
				list: [],
				selectList: [],
				centerDialogVisible: false
			}
		},
		created() {
			this.initHead()
			this.list = this.leveThirdList
		},
		methods: {
			initHead() {
				this.$ajax({
					api: 'modelhead'
				}).then(res => {
					if (res.status === 200) {
						this.selectList = res.data
						console.log(this.selectList)
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			editFn(item) {
				this.id = item.id
				this.title = '编辑属性'
				this.propertyName = item.propertyName
				this.groupName = item.groupName
				this.num = item.sort
				this.type = item.propertyType
				this.centerDialogVisible = true
			},
			addCat() {
				this.title = '新增属性'
				this.centerDialogVisible = true
				this.type = 'TEXT'
				this.id = this.propertyName = this.groupName = this.num = ''
			},
			saveAdmin() {
				let attr = !this.propertyName ? '请填写属性名称' : !this.type ? '请选择属性类型' : !this.groupName ? '请填写属性组' : !this.num ?
					'请填写顺序号' : ''
				if (attr) {
					this.$message({
						type: 'error',
						message: attr
					})
					return
				}
				this.$ajax({
					api: 'attr/save',
					params: {
						id: this.id,
						catId: this.secondId,
						propertyName: this.propertyName,
						propertyType: this.type,
						groupName: this.groupName,
						sort: this.num
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.$emit('handleFridLeave')
						this.$message({
							type: 'success',
							message: '操作成功'
						})
						this.centerDialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: res.data.message
						})
					}

				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			deleteFn(item) {
				this.$confirm("删除二级品类?", "确定删除此属性", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'attr/delete',
						params: {
							id: item.id
						}
					}).then(res => {
						if (res.status === SUCCESS_REQUEST_STATUS) {
							this.$emit('handleFridLeave')
							this.$message({
								type: 'success',
								message: '删除成功'
							})
						}
					}).catch(err => {
						this.$message({
							type: 'error',
							message: err.message
						})
					})
				})
			}
		},

		watch: {
			leveThirdList(val) {
				this.list = val
			},
			propertyName(val, oldVal) {
				if(val) {
					this.groupName = this.selectList.filter((item) => {return  val == item.showName})[0].groupName
				}
			}
		}
	}
</script>
